<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import earthquakes from "@/data/earthquakes"

export default {
  name: "AddAnimateMarker.component",
  components: {Maptalks},
  setup() {

    const getGradient = (colors) => {
      return {
        type: 'radial',
        colorStops: [
          [0.70, 'rgba(' + colors.join() + ', 0.5)'],
          [0.30, 'rgba(' + colors.join() + ', 1)'],
          [0.20, 'rgba(' + colors.join() + ', 1)'],
          [0.00, 'rgba(' + colors.join() + ', 0)']
        ]
      };
    }

    let mapOnLoadCB = (map) => {
      map.setCenter([0, 0])
      map.setZoom(2)
      // earthquakes data from earthquakes.js(usgs.gov)
      let geometries = maptalks.GeoJSON.toGeometry(earthquakes);
      let layer = new maptalks.AnimateMarkerLayer(MapLayerConst.MAP_ANIMATE_MARKER_LAYER, geometries, {
        'animation': 'scale,fade',
        'randomAnimation': true,
        'geometryEvents': false
      }).setStyle([
        {
          filter: ['<=', 'mag', 2],
          symbol: {
            'markerType': 'ellipse',
            'markerLineWidth': 0,
            'markerFill': getGradient([135, 196, 240]),
            'markerFillOpacity': 0.8,
            'markerWidth': 5,
            'markerHeight': 5
          }
        },
        {
          filter: ['<=', 'mag', 5],
          symbol: {
            'markerType': 'ellipse',
            'markerLineWidth': 0,
            'markerFill': getGradient([255, 255, 0]),
            'markerFillOpacity': 0.8,
            'markerWidth': 12,
            'markerHeight': 12
          }
        },
        {
          filter: ['>', 'mag', 5],
          symbol: {
            'markerType': 'ellipse',
            'markerLineWidth': 0,
            'markerFill': getGradient([216, 115, 149]),
            'markerFillOpacity': 0.8,
            'markerWidth': 20,
            'markerHeight': 20
          }
        }
      ]).addTo(map);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>